<template>
    <div>
        <div>{{tableComment}}
            <el-button style="float: right"
                       type="primary" round
                       @click="initTableData">刷新
            </el-button>
            <el-button style="float: right"
                       type="primary" round
                       @click="handleAddClick">增加
            </el-button>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column v-for="item in columnData" :prop="item.prop" :label="item.label" :width="item.width"
                             :key="item.prop">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button @click="handleEditClick(scope.row)" size="mini">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.$index)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="tableComment" :visible.sync="dialogFormVisible">
            <el-form :model="tempForm">
                <el-form-item v-for="item in columnData" :label="item.label" :key="item.prop">
                    <demo-form v-model="tempForm[item.prop]"
                               :formType="item.param1"
                               :formDisabled="item.param9" :dictionaryId="item.param2"
                               :selectObject="item">

                    </demo-form>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleDialogCancel">取 消</el-button>
                <el-button type="primary" @click=handleDialogSubmit>确 定</el-button>
            </div>
        </el-dialog>

        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="1000">
        </el-pagination>
    </div>

</template>

<script>
    import StringUtil from '@/utils/stringUtil'
    import DemoForm from '@/components/DemoForm/DemoForm.vue'

    export default {
        props: {
            tableName: String,
            tableComment: String
        },
        components: {
            DemoForm
        },
        created() {
            this.initColumnData();
            this.initTableData();
        },
        mounted() {
            // this.initTableData();
        },
        updated() {
            // this.initTableData();
        },
        methods: {
            handleAddClick() {
                this.method = 'post'
                this.tempForm = {}
                this.dialogFormVisible = true
            },
            handleDialogSubmit() {
                this.dialogFormVisible = false
                this.solveData(this.tempForm)
            },
            handleDialogCancel() {
                this.tempForm = {};
                this.dialogFormVisible = false;
            },
            handleEditClick(row) {
                this.method = 'put'
                this.tempForm = row
                this.dialogFormVisible = true
                console.log(row);
            },
            handleDeleteClick(index) {
                this.deleteData(this.tableData[index].id)
                this.tableData.splice(index, 1)
                // console.log('scope >>',scope,scope.$index)
            },
            handleCurrentChange(val) {
                this.currentPage = val
                console.log(`当前页: ${val}`);
                this.initTableData();
            },
            async initTableData() {
                this.tableData = []
                let tn = StringUtil.toHump(this.tableName)
                console.log(`刷新表格数据>>`, tn);
                await this.$api.commonData.dataList(tn, {
                    page: this.currentPage,
                    size: this.pageSize
                }).then(res => {
                    console.log(`接收表格数据 >>>`, res)
                    this.tableData = res.data.data
                })
            },
            initColumnData() {
                console.log(`刷新表头数据`);
                let tn = this.url + this.tableName
                this.$api.commonData.dataList(tn, {
                    page: this.currentPage,
                    size: 100
                }).then(res => {
                    console.log(`接收表头数据 >>>`, res)
                    this.columnData = res.data.data
                })
            },
            insertData(data) {
                console.log(`增加数据`);
                let tn = StringUtil.toHump(this.tableName)
                this.$api.commonData.insert(tn, data).then(res => {
                    console.log(`增加数据 >>>`, res.data)
                })
                return true
            },
            updateData(data) {
                console.log(`更新数据`);
                let tn = StringUtil.toHump(this.tableName)
                this.$api.commonData.update(tn, data).then(res => {
                    console.log(`更新数据 >>>`, res.data)
                })
            },
            deleteData(id) {
                console.log(`删除数据`, id);
                let tn = StringUtil.toHump(this.tableName) + '/' + id
                this.$api.commonData.delete(tn).then(res => {
                    console.log(`删除数据 >>>`, res.data)
                })
            },
            async solveData(data) {
                if (this.method === 'post') {
                    await this.insertData(data)
                } else if (this.method === 'put') {
                    await this.updateData(data)
                } else if (this.method === 'delete') {
                    await this.deleteData(data)
                }
                this.tempForm = {}
                this.method = ''
                await this.initTableData()
            }
        },
        data() {
            return {
                url: 'tableColumn/',
                currentPage: 1,
                pageSize: 20,
                tempForm: Object,
                method: 'update',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                columnData: [
                    {
                        prop: "date",
                        label: "日期",
                        width: "180"
                    },
                    {
                        prop: "name",
                        label: "姓名",
                        width: "180"
                    },
                    {
                        prop: "address",
                        label: "地址"
                    }
                ],
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            }
        }
    }
</script>
